<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/all.css">
    <!-- 小图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="../CSS/aboutme.css">
    <style>
        /* 样式可根据需要进行调整 */


        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        img {
            display: flex;
        }
    </style>
    <style id="mohubeijing">

    </style>
</head>

<body>
    <header>
        <h1>无林楚月的个人博客</h1>
        <nav>
            <ul>
                <li><a href="./home.html">主页</a></li>
                <li><a href="./works.html">作品集</a></li>
                <li><a href="./message.html">留言</a></li>
                <li><a href="./webmap.html">网站地图</a></li>
                <li class="dropdown">
                    <!-- 小三角 -->
                    <a href="javascript:void(0)" class="dropbtn">更多 <i class="fas fa-caret-down"></i></a>
                    <!-- 下拉菜单 -->
                    <div class="dropdown-content">
                        <a href="./aboutme.html">关于我</a>
                        <a href="./contant.html">联系方式</a>
                    </div>
                </li>
            </ul>
        </nav>
    </header>
    <main>

        <div class="container">
            <table>
                <form action="">
                    <tr>
                        <h1 style="writing-mode: vertical-rl;">想不想看看胥鼎盛的肌肉</h1>
                        <div class="controls">
                            <label for="base">调个色</label>
                            <input type="color" name="base" value="#ffc600" preload="auto">
                            <label for="spacing">放大试试？:</label>
                            <input type="range" name="spacing" min="0" max="50" value="50" data-sizing="px">
                            <br><br><br><br>
                            <label for="blur">嘻嘻:</label>
                            <input type="range" name="blur" min="10" max="100" value="100" data-sizing="px"
                                style="width: 1000px;">
                        </div>
                    </tr>
                    <tr>
                        <img src="../img/肌肉.jpg" alt="" id="jirou">
                    </tr>
                </form>

            </table>

            <div id="myModal" class="modal">
                <div class="modal-content" id="notLogin">
                    <span class="close" onclick="closeForm()">&times;</span>
                    <h2>用户注册/登录</h2>
                    <form id="loginForm">
                        <form id="loginForm">
                            <input type="text" id="username" placeholder="我说胥鼎盛最帅你同意吗（回答：同意）" required
                                style="width: 250px;">
                            <input type="text" id="password" placeholder="反悔是小狗（回答：好）" required>
                            <button type="submit" id="loginBtn">登录</button>
                            <button type="button" id="registerBtn" onclick="showRegisterForm()">注册</button>
                        </form>
                    </form>
                    <form id="registerForm" style="display: none;">
                        <!-- 表单内容 -->
                    </form>
                </div>
            </div>
        </div>

    </main>
    <footer>
        <p>&copy; 欢迎访问，合作请联系3053624046@qq.com,谢谢</p>
        <div class="social-icons">
            <a href="https://twitter.com/" class="social-icon"><i class="fab fa-twitter"></i></a>
            <a href="https://www.facebook.com/" class="social-icon"><i class="fab fa-facebook"></i></a>
            <a href="https://www.instagram.com/" class="social-icon"><i class="fab fa-instagram"></i></a>
        </div>
    </footer>
    <script>
        const inputs = document.querySelectorAll('.controls input');
        let isLogin = false
        function handleUpdate() {
            const suffix = this.dataset.sizing || '';
            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
            if (parseInt(this.value) < 23 && this.name == 'blur' && !isLogin) {
                // document.activeElement.blur()//移除鼠标焦点
                // console.log(isLogin)
                openForm();
            }
            if (parseInt(this.value) < 23 && this.name == 'blur' && isLogin) {
                document.getElementById('jirou').src = '../img/黑手.jpg'

            }
        }

        inputs.forEach(input => input.addEventListener('change', handleUpdate));
        inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

    </script>
    <script>
        function openForm() {
            document.getElementById("myModal").style.display = "block"; // 显示模态框
        }

        function closeForm() {
            document.getElementById("myModal").style.display = "none"; // 隐藏模态框
        }

        function showRegisterForm() {
            alert("没有注册功能！不许逃避问题！")
        }
        document.getElementById("loginForm").addEventListener("submit", function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 在这里执行登录逻辑
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;
            if (username == '同意' && password == '好') {
                isLogin = true;
                // console.log(isLogin)
                closeForm()
            }
            // console.log("登录 - 用户名:", username, "密码:", password);
        });

        //     // 在这里执行注册逻辑
        // document.getElementById("registerForm").addEventListener("submit", function (event) {
        //     event.preventDefault(); // 阻止表单默认提交行为

        //     const newUsername = document.getElementById("newUsername").value;
        //     const newPassword = document.getElementById("newPassword").value;
        //     // console.log("注册 - 新用户名:", newUsername, "新密码:", newPassword);
        // });
    </script>
    <script src="../JS/all.js"></script>
</body>

</html>